<template>
    <div class="list">
        <div class="product-show">
            <h3>退货商品</h3>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="productPic" label="商品图片" align="center" width="190">
                    <template #default="scope">
                        <img :src="scope.row.productPic" />
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center" width="250">
                    <template #default="scope">
                        <div>{{ scope.row.productName }}</div>
                        <div>品牌:{{ scope.row.productBrand }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号" align="center" width="195">
                    <template #default="scope">
                        <div>价格:{{ scope.row.productRealPrice }}</div>
                        <div>货号:{{ scope.row.productId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="productAttr" label="属性" align="center" width="195" />
                <el-table-column prop="productCount" label="数量" align="center" />
                <el-table-column prop="productRealPrice" label="小计" align="center">
                    <template #default="scope">
                        <div>¥{{ scope.row.productRealPrice }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <h3 class="productRealPrice">合计：¥<span>{{ tab?.productRealPrice }}</span> </h3>
        </div>

        <div class="product-info">
            <h3>服务单信息</h3>
            <div class="product-info-item">
                <el-row>
                    <el-col>
                        <div class="name">服务单号</div>
                        <div class="value">{{ tab?.id }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">申请状态</div>
                        <div class="value">{{ tab?.handleNote }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">订单编号</div>
                        <div class="value">{{ tab?.orderSn }}<el-button size="small" type="text" bg="false"
                                @click="router.push(`/oms/orderDetail?id=${tab?.orderId}`)">查看
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">申请时间</div>
                        <div class="value">{{ fomatDate(tab?.handleTime) }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">用户账号</div>
                        <div class="value">{{ tab?.memberUsername }}
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">联系人</div>
                        <div class="value">{{ tab?.returnName }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">联系电话</div>
                        <div class="value">{{ tab?.returnPhone }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">退货原因</div>
                        <div class="value">{{ tab?.reason }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">问题描述</div>
                        <div class="value">{{ tab?.description }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">凭证图片</div>
                        <div class="value"><img src="fawfaw"></div>
                    </el-col>
                </el-row>
            </div>

            <div class="product-info-item">
                <el-row>
                    <el-col>
                        <div class="name">订单金额</div>
                        <div class="value">{{ tab?.productRealPrice }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">确认退货金额</div>
                        <div class="value">￥
                            <input :value="tab?.returnAmount" type="text" disabled />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">所在地区</div>
                        <div class="value"> <input :value="tab?.companyAddress.addressName" type="text" disabled />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">收货人姓名</div>
                        <div class="value">{{ tab?.returnName }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">地区</div>
                        <div class="value">{{ tab?.companyAddress.province }}{{ tab?.companyAddress.region }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">详细地址</div>
                        <div class="value">{{ tab?.companyAddress.detailAddress }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">联系电话</div>
                        <div class="value">{{ tab?.returnPhone }}</div>
                    </el-col>
                </el-row>
            </div>

            <div class="product-info-item">
                <el-row>
                    <el-col>
                        <div class="name">处理人员</div>
                        <div class="value">{{ tab?.receiveMan }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">处理时间</div>
                        <div class="value">{{ fomatDate(tab?.handleTime) }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">处理备注</div>
                        <div class="value">{{ tab?.handleNote }}</div>
                    </el-col>
                </el-row>
            </div>

            <div class="product-info-item">
                <el-row>
                    <el-col>
                        <div class="name">收货人</div>
                        <div class="value">{{ tab?.handleMan }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">收货时间</div>
                        <div class="value">{{ fomatDate(tab?.receiveTime) }}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <div class="name">收货备注</div>
                        <div class="value"></div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { user } from "@/api/index";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { fomatDate } from "@/utils/index";

// 获取路由实例
const route = useRoute()
const router = useRouter()

// 获取地址上的id
const id = Number(route.query.id)
const tab = ref<deepgetreturnApply>()
const tableData = ref<any>([])

user.deepreturnApply(id).then(res => {
    if (res.code == 200) {
        tab.value = res.data
        tableData.value.push(tab.value)
        // console.log(tableData.value);

    }
})



</script>

<style scoped lang="less">
.list {

    width: 1200px;
    padding: 20px;
    margin: 0 auto;
    margin-top: 85px;
    color: black;
    box-sizing: border-box;

    .product-info-item {
        margin: 20px 0;
    }

    .el-table {
        border: 1px solid rgb(212, 207, 207);

        img {
            width: 80px;
        }
    }

    .product-info {
        border: 1px solid rgb(238, 231, 231);
        padding: 10px 30px;
        margin-top: 20px;
    }

    .product-show {
        border: 1px solid rgb(238, 231, 231);
        padding: 10px 30px;

        h3 {
            font-weight: normal;
        }
    }

    .productRealPrice {
        text-align: right;


        span {
            color: red;
        }
    }
}

.el-col {
    display: flex;
    justify-content: space-evenly;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border: 1px solid rgb(229, 233, 237);

    .name {
        flex: 1;
        background: rgb(242, 246, 252);
        padding: 0 10px;
        border-right: 1px solid rgb(229, 233, 237);
    }

    .value {
        flex: 3;
        padding: 0 10px;

        input {
            margin-left: 10px;
        }

        img {
            width: 80px;
        }
    }
}
</style>